
<template>
  <div class="app-container">
    <!-- Note that row-key is necessary to get a correct row order. -->
    <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="用户openID" min-width="150px">
        <template slot-scope="scope">
          <span>{{ scope.row.openid }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="180px" align="center" label="商户订单号">
        <template slot-scope="scope">
          <span>{{ scope.row.outTradeNo }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="180px" label="支付时间">
        <template slot-scope="scope">
          <span>{{ scope.row.timeEnd }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="180px" align="center" label="订单金额">
        <template slot-scope="scope">
          <span>{{ scope.row.totalFee }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="180px" align="center" label="操作">
        <template slot-scope="scope">
          <i class="el-icon-tickets" style="color: #409EFF; cursor: pointer; font-size: 20px" @click="toDetail(scope.row.openid)"></i>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />

    <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
    <!-- <div class="show-d">
      <el-tag style="margin-right:12px;">{{ $t('table.dragTips1') }} :</el-tag> {{ oldList }}
    </div>
    <div class="show-d">
      <el-tag>{{ $t('table.dragTips2') }} :</el-tag> {{ newList }}
    </div> -->
  </div>
</template>

<script>
import { OrderTraceList } from '@/api/trace'
import Sortable      from 'sortablejs'
import Pagination    from '@/components/Pagination'
import { parseTime } from '@/utils'

export default {
  name: 'OrderTrace',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10
      },
      sortable: null,
      oldList: [],
      newList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      const { data }   = await OrderTraceList(this.listQuery)
      data.list.forEach((n1, i1) => {
        n1.timeEnd     = parseTime(n1.timeEnd)
      })
      this.list        = data.list
      this.total       = data.total
      this.listLoading = false
      // this.oldList = this.list.map(v => v.id)
      // this.newList = this.oldList.slice()
      // this.$nextTick(() => {
      //   this.setSort()
      // })
    },
    toDetail(openid) {
      if (!openid) return
      this.$router.push({
        path: `/trace/print-trace/${openid}`,
      })
    }
  }
}
</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
</style>